<template>
  <div id="app">
    <footer class="footer" v-if="$route.meta.isShow">
      <router-link to="/home" active-class="active">
        <span class="icon"></span>
        <span class="text">首页</span>
      </router-link>
      <router-link to="/licai" active-class="active">
        <span class="icon"></span>
        <span class="text">理财</span>
      </router-link>
      <router-link to="/shopping" active-class="active">
        <span class="icon" active-class="active"></span>
        <span class="text">购物</span>
      </router-link>
      <router-link to="/info" active-class="active">
        <span class="icon"></span>
        <span class="text">消息</span>
      </router-link>
      <router-link to="my" active-class="active">
        <span class="icon"></span>
        <span class="text">我的</span>
      </router-link>
    </footer>
    <keep-alive v-if="true">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
export default {
  data(){
    return {
    }
  },
  methods:{

  }
}
</script>
<style lang="scss">
body {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
a,
a:hover {
  text-decoration: none;
  color: #000;
  //点击时高亮去除
  -webkit-tap-highlight-color: transparent;
}
img {
  vertical-align: middle;
}
button {
  border: 0;
  outline: none;
  background: #fff;
}
.footer {
  width: 100%;
  height: 50px;
  display: flex;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  z-index: 10000;
  a {
    display: block;
    margin-top: 10px;
    flex-basis: 20%;
    font-size: 12px;
    text-align: center;
    .icon {
      margin-left: 28px;
      display: block;
      width: 40px * (5/10);
      height: 40px * (5/10);
      background: url(./assets/sprite1.png) no-repeat;
      background-size: (623px * (5/10)) (1016px * (5/10));
    }
    .text {
      color: #c4c4c4;
    }
  }
  a.active .text {
    color: #513eb2;
  }
  a:nth-child(1) .icon {
    background-position: (-495px * (5/10)) (-750px * (5/10));
  }
  a:nth-child(2) .icon {
    background-position: (-90px * (5/10)) (-885px * (5/10));
  }
  a:nth-child(3) .icon {
    background-position: (-224px * (5/10)) (-885px * (5/10));
  }
  a:nth-child(4) .icon {
    background-position: (-360px * (5/10)) (-885px * (5/10));
  }
  a:nth-child(5) .icon {
    background-position: (-495px * (5/10)) (-885px * (5/10));
  }
  a:nth-child(1).active .icon {
    background: url(./assets/sprite2.png) no-repeat;
    background-size: (623px * (5/10)) (1016px * (5/10));
    background-position: (-495px * (5/10)) (-750px * (5/10));
  }
  a:nth-child(2).active .icon {
    background: url(./assets/sprite2.png) no-repeat;
    background-size: (623px * (5/10)) (1016px * (5/10));
    background-position: (-90px * (5/10)) (-885px * (5/10));
  }
  a:nth-child(3).active .icon {
    background: url(./assets/sprite2.png) no-repeat;
    background-size: (623px * (5/10)) (1016px * (5/10));
    background-position: (-224px * (5/10)) (-885px * (5/10));
  }
  a:nth-child(4).active .icon {
    background: url(./assets/sprite2.png) no-repeat;
    background-size: (623px * (5/10)) (1016px * (5/10));
    background-position: (-360px * (5/10)) (-885px * (5/10));
  }
  a:nth-child(5).active .icon {
    background: url(./assets/sprite2.png) no-repeat;
    background-size: (623px * (5/10)) (1016px * (5/10));
    background-position: (-495px * (5/10)) (-885px * (5/10));
  }
}
</style>
